<script setup>
import * as echarts from 'echarts'
import instance from '../../../axios'
import { onMounted } from 'vue'
import { ElMessage } from 'element-plus'
onMounted(() => {
    bar_gender()
})
var bar_gender = () => {
    instance.get('/api/getGenderCount').then(res => {
        ElMessage.success('获取数据成功'+JSON.stringify(res.data.data))
        let data = res.data.data
        let xdata = data.map(item => item.gender)
        let ydata = data.map(item => item.count)
        let myChart = echarts.init(document.getElementById('bar'))
        let option = {
            xAxis: {
                type: 'category',
                data:xdata
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: ydata,
                    type: 'bar'
                }
            ]
        };
        myChart.setOption(option)
        window.addEventListener('resize', myChart.resize)
    }).catch(err => {
        ElMessage.error('获取数据失败')
    });

}
</script>

<template>
    <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/admin/welcome' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>
            <a href="/admin/student">学生管理</a>
        </el-breadcrumb-item>
        <el-breadcrumb-item>统计分析</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider />
    <!-- 制作统计图表，一行2个，共3行，使用element-plus的echarts组件 el-card 组件 -->
    <el-row :gutter="24">
        <el-col :span="12">
            <el-card>
                <h3>学生性别比例</h3>
                <div id="bar" style="width: 100%; height: 400px;">

                </div>
            </el-card>
        </el-col>
        <el-col :span="12">
            <el-card>
                <h3>学生年龄分布</h3>
                <div id="pie" style="width: 100%; height: 400px;">

                </div>
            </el-card>
        </el-col>
    </el-row>
    <br>
    <el-row :gutter="24">
        <el-col :span="12">
            <el-card>
                <div id="line" style="width: 100%; height: 400px;"></div>
            </el-card>
        </el-col>
        <el-col :span="12">
            <el-card>
                <div id="radar" style="width: 100%; height: 400px;"></div>
            </el-card>
        </el-col>
    </el-row>
</template>

<style scoped></style>
